<template>
  <!-- #ifdef H5 -->
  <el-form
    :label-position="commonAttr?.labelPosition ?? 'right'"
    :label-width="commonAttr?.labelWidth ?? '110px'"
    :class="commonAttr?.key ?? 'form-container'"
    :model="formData"
    :style="formStyle"
    :size="commonAttr?.size ?? 'default'"
    :inline="commonAttr?.inline ?? false"
    :rules="computedFormRules"
  >
    <template v-for="metaItem in metaItemList" :key="metaItem.key">
      <el-form-item
        :label="metaItem.label"
        v-if="metaItem?.isShow ?? true"
        :prop="metaItem.key"
        :style="metaItem?.style ?? {}"
      >
        <template v-slot:label>
          <template v-if="isLabelRichText(metaItem)">
            <text v-html="metaItem.labelRichText"></text>
          </template>
          <template v-else-if="isLabelCustomizeComp(metaItem)">
            <component
              :is="metaItem.labelCustomizeComp"
              :meta-item="metaItem"
              :meta-key="metaItem.key"
              :meta-item-list="metaItemList"
              :common-attr="commonAttr"
              :form-data="formData"
              :meta-dynmic-config="getMetaDynmicConfig(metaItem)"
            ></component>
          </template>
          <template v-else>
            {{ metaItem.label }}
          </template>
        </template>
        <DimensionItemContent
          v-if="!isItemContentCustomizeComp(metaItem)"
          :meta-item="metaItem"
          :meta-item-list="metaItemList"
          :common-attr="commonAttr"
          :form-data="formData"
          :meta-dynmic-config="getMetaDynmicConfig(metaItem)"
          :vm-template-config="vmTemplateConfig"
        ></DimensionItemContent>
        <component
          v-else
          :is="metaItem.itemContentCustomizeComp"
          :meta-item="metaItem"
          :meta-key="metaItem.key"
          :meta-item-list="metaItemList"
          :common-attr="commonAttr"
          :form-data="formData"
          :meta-dynmic-config="getMetaDynmicConfig(metaItem)"
        ></component>
      </el-form-item>
    </template>
  </el-form>
  <!-- #endif -->
</template>
<script setup>
// #ifdef H5
import { ElForm, ElFormItem } from "element-plus";
import "element-plus/theme-chalk/el-form.css";
import "element-plus/theme-chalk/el-form-item.css";
// #endif

import { ref, watch, computed } from "vue";
import DimensionItemContent from "@gd-accbuild-ui/dimension-ui/dimension-item-content/dimension-item-content.vue";
const props = defineProps({
  commonAttr: {
    type: Object,
  },
  metaItemList: {
    type: Array,
  },
  formData: {
    type: Object,
  },
  metaDynmicConfigList: {
    type: Array,
    default: () => [],
  },
  vmTemplateConfig: {
    type: Object,
  },
});
/**
 * 获取动态元数据配置
 */
const getMetaDynmicConfig = (metaItem) => {
  if (!Array.isArray(props.metaDynmicConfigList)) {
    return { key: metaItem.key };
  }
  const matchedConfig = props.metaDynmicConfigList.find(
    (config) => config.key === metaItem.key
  );
  if (!matchedConfig) {
    return { key: metaItem.key };
  } else {
    return matchedConfig;
  }
};
////////////////////
const isLabelRichText = (metaItem) => {
  return metaItem.hasOwnProperty("labelRichText");
};
const isLabelCustomizeComp = (metaItem) => {
  return metaItem.hasOwnProperty("labelCustomizeComp");
};
const isItemContentCustomizeComp = (metaItem) => {
  return metaItem.hasOwnProperty("itemContentCustomizeComp");
};
///////////////////
const formStyle = computed(() => {
  const style = props.commonAttr?.style ?? {};
  return { ...style, "overflow-y": "scroll" };
});

const computedFormRules = computed(() => {
  let obj = {};
  Array.isArray(props.metaItemList) &&
    props.metaItemList.forEach((metaItem) => {
      obj[metaItem.key] = metaItem?.rule ?? [];
    });
  return obj;
});
</script>
<style lang="scss" scoped></style>
